<template>
  <div class="page">
    <headerbar>筑先锋</headerbar>
    <section class="frame-content-sub no-bg">
    <section class="" v-if="false">
      <ul class="tab">
        <li @click="loadData()" :class="{'active':tabIndex==0}"><span>图文</span></li>
        <li @click="loadDataH5()" :class="{'active':tabIndex==1}"><span>H5</span></li>
      </ul>
    </section>

      <section class="mgt-2" v-if="tabIndex === 0">
        <div class="d-scroll  list-news-img" style="">
          <fetchData  class="people-list" :loading="isLoading" :data="swipeData"></fetchData>
          <cube-scroll
            ref="scroll"
            :options="options"
            @pulling-up="onPullingUp"
          >
                    <div v-for="(data,index) in swipeData" :key="data.id" @click="goDetail(data)" class="item">
                      <div class="img" v-if="data.listPic">
                        <img v-if="!data.listPic" src="../../../../static/images/user_bg.jpg" alt="">
                        <img v-if="data.listPic" :src="tools.getImgUrl(data.listPic,true)" alt="">
                      </div>
                      <div class="cont">
                        <div class="title"><div class="hower">{{data.title}}</div></div>
                        <template v-if="data.zhuanji != 1">
                          <div class="tip"><span class="one">发布：{{data.source}}</span><span class="one">审核人：{{getcheckUser(data)}}</span></div>
                          <div class="tip">
                            <span class="one">发布时间：{{getTime(data.createTime)}}</span>
                            <broadcast :item="data" :isShow="false"/>
                          </div>
                        </template>
                      </div>
                    </div>
            <div class="text-center no-data" v-if="!isLoading&&swipeData.length===0">
              <img src="../../../../static/images/no_data.png" alt="">
              <p>暂无数据</p>
            </div>
          </cube-scroll>

        </div>
      </section>
      <section class="mgt-2" v-if="tabIndex === 1">
        <div class="d-scroll list-wenda list-news-img" style="">
          <fetchData  class="people-list" :loading="isLoading" :data="swipeDataH5"></fetchData>
          <cube-scroll
            ref="scroll"
            :options="launchOptions"
            @pulling-up="launchOnPullingUp"
          >
                <div class="" v-for="(data,index) in swipeDataH5" :key="data.id">
                    <div @click="goDetail(data)" class="item">
                      <div class="icon">
                        <span class="img"><img src="../../../../static/images/user_bg.jpg" alt=""></span>
                      </div>
                      <div class="cont">
                        <div class="title"><span>{{data.title}}</span></div>
                        <div class="tip"><span class="one">发布：{{data.source}}</span><span class="one">审核人：{{getcheckUser(data)}}</span></div>
                        <div class="tip">
                          <span class="one">发布时间：{{getTime(data.createTime)}}</span>
                        </div>
                      </div>
                    </div>
                </div>
            <div class="text-center no-data" v-if="!isLoading&&swipeDataH5.length===0">
              <img src="../../../../static/images/no_data.png" alt="">
              <p>暂无数据</p>
            </div>
          </cube-scroll>
        </div>
      </section>
    </section>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import moment from 'moment'
  export default {
    name: 'goodPartyMembersAround',
    data () {
      return {
        isLoading: true,
        tabIndex: 0,
        pageNo: 1,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        launchOptions: {
          pullUpLoad: true,
          scrollbar: false
        },
        swipeData: [],
        specialListData: [],
        swipeDataH5: [],
        pageNoH5: 1
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      loadData () {
        this.isLoading = true
        this.tabIndex = 0
        let data = {
          channelId: '11',
          pageNo: this.pageNo,
          pageSize: 20
        }
        return this.fetchHeji(data)
        // 添加合集，下面的就没用了
        loginService.pageForBack(data).then((res) => {
          if (res.code === 0 && res.data.length < 1) {false
            this.isLoading = false
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate()
            return tools.tip('已无更多数据')
          }
          this.pageNo ++
          this.swipeData = this.swipeData.concat(res.data)
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = false
          }, 100)
        })
      },
      // 合集请求
      fetchHeji (param) {
        this.fetchService.specialList(param).then(res => {
          if (res.code !== 0) {
            return this.tools.alert(res.message || res.resp_msg)
          }
          this.pageNo ++
          if (res.data.album && res.data.album.length > 0) {
            res.data.album.map((v) => {
              v.title = v.channelName
              v.listPic = v.pic
              v.zhuanji = 1
            })
            this.swipeData = this.swipeData.concat(res.data.album)
          }
          this.swipeData = this.swipeData.concat(res.data.page)
          this.forceUpdateScroll();
        })
      },
      // 刷新滚动列表
      forceUpdateScroll () {
        setTimeout(() => {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          this.options.isPullUpLoad = false
        }, 100)
      },
      loadDataH5 () {
        this.isLoading = true
        this.tabIndex = 1
        let data = {
          channelId: '66783c724b734f81b2e6729fdb804157',
          pageNo: this.pageNo,
          pageSize: 20
        }
        loginService.pageForBack(data).then((res) => {
          if (res.code === 0 && res.data.length < 1) {
            this.isLoading = false
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate()
            return tools.tip('已无更多数据')
          }
          this.pageNoH5 ++
          this.swipeDataH5 = this.swipeDataH5.concat(res.data)
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.launchOptions.isPullUpLoad = false
          }, 100)
        })
      },
      onPullingUp () {
        console.log('onPullingUp')
        this.loadData()
      },
      launchOnPullingUp () {
        console.log('launchOnPullingUp')
        this.loadDataH5()
      },
      goDetail (data) {
        if (data.zhuanji === 1) {
          this.$router.push({name: 'redCloudHeadlineList', query: {id: data.id,channelName:data.title.replace('【合集】', '')}})
        } else {
          this.$store.state.newsDetail = data
          this.$router.push({path: `/goodPartyMembersAroundDetail/${data.id}`})
        }
      },
      getcheckUser (data) {
        if (!data.checkUserInput || data.checkUserInput === '') {
          return data.checkUserAuto
        }
        return data.checkUserInput
      },
      getTime (createTime) {
        return moment(createTime).format('YYYY-MM-DD HH:mm')
      }
    }
  }
</script>

<style scoped lang="scss">

  .list-news-img .item {
    align-items: center;
    .img {
      margin-right:20px;;
    }
    .cont {
      margin-left:0;
    }
  }
</style>
